// 弹窗组件 MyFormDialog.vue
<template>
  <el-dialog style="height: 80%; width: 97%; overflow: auto;">
    <el-form
      :model="form1"
      ref="form1"
      label-width="85px"
      v-if="parentData1 ? true : false"
    >
      <div class="ttp">查询</div>
      <div class="forms">
        <div>
          <div class="forms">
            <el-form-item label="查询方式">
               <el-select
               class="select"
                v-model="rxvalue"
                placeholder="Select"
                size="large"
              >
                <el-option
                  v-for="item in optionsfs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="forms">
            <el-form-item label="查询内容">
              <el-input
                v-model="value1"
                autocomplete="off"
                 :placeholder="rxvalue==2?'请输入流水号':'请输入体检编号/身份证号/姓名'"
                class="et"
                @keyup.enter="handleGoKey"
              ></el-input>
            </el-form-item>
            <el-form-item label="评估状态">
              <el-select v-model="value2" placeholder="Select" size="large">
                <el-option
                  v-for="item in options"
                  :key="item.Use_ID"
                  :label="item.Use_Name"
                  :value="item.Use_ID"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="forms">
            <el-form-item label="开始日期">
              <van-field
                readonly
                clickable
                placeholder="请选择开始日期"
                is-link
                v-model="value3"
                @click="showCalendar1 = true"
              />
              <van-calendar
                ref="form1.date1"
                switch-mode="year-month"
                :min-date="new Date('2000-01-01')"
                :show="showCalendar1"
                @confirm="onConfirmDate1($event, 'date1')"
                @close="showCalendar1 = false"
              />
            </el-form-item>
            <el-form-item label="结束日期">
              <van-field
                readonly
                clickable
                placeholder="请选择结束日期"
                is-link
                v-model="value4"
                @click="showCalendar2 = true"
              />
              <van-calendar
                ref="form1.date1"
                switch-mode="year-month"
                :show="showCalendar2"
                :min-date="new Date('2000-01-01')"
                @confirm="onConfirmDate1($event, 'date2')"
                @close="showCalendar2 = false"
              />
            </el-form-item>
          </div>
        </div>
        <el-form-item>
          <div class="dialog-footer">
            <el-button class="t1" type="primary" @click="submitForm"
              >确 定</el-button
            >
            <el-button class="t2" @click="dialogVisible = false"
              >取 消</el-button
            >
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer">
      <div class="tb" id="tb">
        <el-table
          :data="tabledata"
          style="width: 100%;"
          overflow-y:auto
          height="350"
          virtual-scroll-list
          v-loading="loading == false"
          @current-change="handleCurrentChange"
          highlight-current-row
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
          border
        >
          <el-table-column prop="Check_Rank" width="120" label="体检流水号"></el-table-column>
          <el-table-column width="120px" prop="Pson_Name" label="姓名">
          </el-table-column>
          <el-table-column width="180x" prop="Check_No" label="体检编号">
          </el-table-column>
          <el-table-column width="130x" prop="Check_Date" label="体检日期">
          </el-table-column>
          <el-table-column width="50px" prop="Pson_Age" label="年龄">
          </el-table-column>
          <el-table-column prop="Pson_CardID" width="190x" label="身份证号">
          </el-table-column>
          <!-- <el-table-column width="80px" prop="Pson_Type" label="人群类型">
          </el-table-column> -->
          <el-table-column width="80px" prop="Check_TzRlt" label="评估结果">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                class="scopebutton"
                size="small"
                type="primary"
                @click="handleqy(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import moment from "moment";
import { userStore } from "../../stores/user.ts";
export default {
  data() {
    return {
      optionsfs : [
  {
    value: '2',
    label: '按流水号',
  },
  {
    value: '1',
    label: '按体检编号/身份证号/姓名',
  }
],
      minAllowedDate: new Date(),
      actiiveName: "a",
      Get_CheckSub_Data1: [],
      tabledata: [],
      options: [
        { Use_ID: "0", Use_Name: "全部" },
        { Use_ID: "1", Use_Name: "未评估" },
        { Use_ID: "2", Use_Name: "已评估" },
      ],
      rxvalue:"2",
      value1: "",
      value2: "1",
      value3: "",
      value4: "",
      value5: "",
      showCalendar1: false,
      showCalendar2: false,
      dialogVisible: false,
    };
  },
  props: ["parentData1", "parentData2", "parentData3"],
  created() {
    this.Interface_Code = sessionStorage.getItem("item");
    this.User_Code = JSON.parse(sessionStorage.getItem("UserInfo")).sUser_Code;
    this.user = userStore();
  },
  mounted() {
    this.value3 = this.user.zytzstartdate?this.user.zytzstartdate: this.formatDate(new Date());
    this.value4 = this.user.zytzenddate?this.user.zytzenddate:this.formatDate(new Date());
    this.value2 = "1";
    this.rxvalue="2"
  },
  methods: {
    handleGoKey(event) {
      // 关闭软键盘的示例代码
      if (event.key === "Enter") {
        event.target.blur();
      } // 假设你的input元素有ref="input"
    },
    handleqy(val) {
      this.Get_CheckSub_Data1 = val;
      this.user.Get_CheckSub_Data1 = this.Get_CheckSub_Data1;
      console.log(this.Get_CheckSub_Data1);
      sessionStorage.setItem("xq", JSON.stringify(this.Get_CheckSub_Data1));
      axios
        .post(
          window.globalUrl.server + "Service.asmx/Get_CheckSub_Data",
          JSON.stringify({
            User_Code: this.User_Code,
            Interface_Code: this.Interface_Code,
            Check_No: val.Check_No,
          })
        )
        .then((res) => {
          if (res.data.RltCode == 1) {
            this.user.Get_CheckSub_Data1 = JSON.parse(res.data.RltData);
            sessionStorage.setItem(
              "data1",
              JSON.stringify(JSON.parse(res.data.RltData))
            );
          }
        })
        .catch((eorro) => {console.log(eorro)});
      
          axios
        .post(
          window.globalUrl.server + "Service.asmx/Get_ZytzEndInfo",
          JSON.stringify({
            User_Code: this.User_Code,
            Interface_Code: this.Interface_Code,
            Pson_CardID: val.Pson_CardID,
          })
        )
        .then((res) => {
          if (res.data.RltCode == 1) {
            this.user.Tz_End = JSON.parse(res.data.RltData);
            sessionStorage.setItem(
              "Tz_End",
              JSON.stringify(JSON.parse(res.data.RltData))
            );
          }
        })
        .catch((eorro) => {console.log(eorro)});
      this.$emit("submit1", this.dialogVisible);
      this.value1 = "";
      this.value2 = "1";
      this.tabledata = [];
    },
    handleCurrentChange(val) {
      console.log("选中的行:", val);
    },
    formatDate(date) {
      return moment(date).format("YYYY-MM-DD");
    },
    onConfirm1(value) {
      this.form1.date1 = this.formatDate(value);
      this.form1.showCalendar = false;
    },
    onConfirmDate1(date, field) {
      console.log(date);
      console.log(field);
      if (field === "date1") {
        this.value3 = this.formatDate(date);
        this.showCalendar1 = false;
        if (this.value4 !== "" && this.value3 > this.value4) {
          alert("开始时间大于结束时间不符合规范，请重新选择");
          this.value3 = "";
        }else{
          this.user.zytzstartdate=this.value3;
       sessionStorage.setItem("zytzstartdate",JSON.stringify(this.value3))
        }
      } else if (field === "date2") {
        this.value4 = this.formatDate(date);
        this.showCalendar2 = false;
        if (this.value3 !== "" && this.value3 > this.value4) {
          alert("开始时间大于结束时间不符合规范，请重新选择");
          this.value4 = "";
        }else{
          this.user.zytzenddate=this.value4
        sessionStorage.setItem("zytzenddate",JSON.stringify(this.value4));
        }
      }
    },
    onConfirmDate2(date, field) {
      console.log(date);
      console.log(field);
      if (field === "date1") {
        this.form2.date1 = this.formatDate(date);
        this.form2.showCalendar1 = false;
      } else {
        this.form2.date2 = this.formatDate(date);
        this.form2.showCalendar2 = false;
      }
    },
    onConfirmDate3(date, field) {
      console.log(date);
      console.log(field);
      if (field === "date1") {
        this.form3.date1 = this.formatDate(date);
        this.form3.showCalendar1 = false;
      }
    },

    submitForm() {
      console.log(this.value1);
      axios
        .post(
          window.globalUrl.server + "Service.asmx/CheckPsonQuery",
          JSON.stringify({
            User_Code: this.User_Code,
            Interface_Code: this.Interface_Code,
            Query_Type:this.rxvalue,
            Query_Name: this.value1,
            Query_ChkState: this.value2,
            Query_sdate: this.value3,
            Query_edate: this.value4,
            Query_Site: this.user.site,
          })
        )
        .then((res) => {
          if (res.data.RltCode == 2) {
            this.tabledata = [];
          } else if (res.data.RltCode == 1) {
            this.tabledata = JSON.parse(res.data.RltData);
            console.log(res);
            console.log(JSON.parse(res.data.RltData));
            document.getElementById("tb").scrollIntoView({
              behavior: "smooth",
              block: "start",
            });
          }
        }).catch((eorro)=>{
          console.log(eorro)
        })
    },
  },
};
</script>
<style scoped>
.t1 {
  margin-bottom: 8px;
}
.t2 {
  margin-top: 8px;
}
.el-button {
  margin-left: 0 !important;
}
::v-deep .centered-dialog {

}
::v-deep .forms {
  display: flex;
}
::v-deep .el-select--large .el-select__wrapper {
  min-height: 30px;
  width: 300px;
}
::v-deep .van-field__control:read-only {
  height: 30px;
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
  justify-content: center;
}
::v-deep .el-input__wrapper {
  height: 30px;
}
::v-deep .el-form-item {
  justify-content: center;
  text-align: right;

}
::v-deep .van-tabs {
  width: 100%;
}
::v-deep .van-tab {
  border: 1px solid;
}
.tb-top {
  margin-bottom: 20px;

}
::v-deep .el-table .cell {
  padding: 0 5px !important;
  font-size: 16px;
  display: flex;
  justify-content: center;
}
.tb {
}
::v-deep .et {
  width: 300px !important;
  border: 0px solid !important;
}
.ttp {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 20px;
}
::v-deep .el-form-item__label {
  font-size: 12px !important;
}
::v-deep .dialog-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column;
  margin-left: 20px;
}
::v-deep .van-field {
  width: 300px;
  border-bottom: 0px solid !important;
  align-items: center;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
  cursor: text;
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  padding: 1px 11px;
  transform: translateZ(0);
  transition: var(--el-transition-box-shadow);
}
::v-deep .van-field__body {
  border: 0px solid !important;
}
.el-form {
  --el-form-label-font-size: var(--el-font-size-base);
  --el-form-inline-content-width: 220px;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}
</style>
